<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="10" style="padding: 10px">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b>简历刷新量排行榜TOP100</b>
            <el-radio-group
              v-model="refreshTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioRefChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="refreshList" style="width: 100%" border>
            <el-table-column prop="fullname" label="姓名" width="70">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="50" align="center">
            </el-table-column>
            <el-table-column
              prop="prop"
              label="基本信息"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.age }} / {{ scope.row.educationCn }} /
                {{ scope.row.experienceCn }}
              </template>
            </el-table-column>
            <el-table-column
              prop="prop"
              label="完整度"
              width="70"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.completePercent }}%
              </template>
            </el-table-column>
            <el-table-column
              prop="count"
              label="刷新次数"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="更新时间"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.refreshtime | dateFormat }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b>简历投递量排行榜TOP100</b>
            <el-radio-group
              v-model="deliverTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioTDChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="deliverList" style="width: 100%" border>
            <el-table-column
              prop="fullname"
              label="姓名"
              width="70"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="50" align="center">
            </el-table-column>
            <el-table-column
              prop="prop"
              label="基本信息"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.age }} / {{ scope.row.educationCn }} /
                {{ scope.row.experienceCn }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="完整度" width="70">
              <template slot-scope="scope">
                {{ scope.row.completePercent }}%
              </template>
            </el-table-column>
            <el-table-column
              prop="count"
              label="投递次数"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="更新时间"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.refreshtime | dateFormat }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="padding: 10px">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b>求职者登录排行榜TOP100</b>
            <el-radio-group
              v-model="jobSeekTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioQZChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="jobSeekList" style="width: 100%" border>
            <el-table-column
              prop="fullname"
              label="姓名"
              width="70"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="50" align="center">
            </el-table-column>
            <el-table-column
              prop="prop"
              label="基本信息"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.age }} / {{ scope.row.educationCn }} /
                {{ scope.row.experienceCn }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="完整度" width="70">
              <template slot-scope="scope">
                {{ scope.row.completePercent }}%
              </template>
            </el-table-column>
            <el-table-column
              prop="count"
              label="投递次数"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="更新时间"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.refreshtime | dateFormat }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b>求职者被下载排行榜TOP100</b>
            <el-radio-group
              v-model="downLoadTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioXZChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="downLoadList" style="width: 100%" border>
            <el-table-column
              prop="fullname"
              label="姓名"
              width="70"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="50" align="center">
            </el-table-column>
            <el-table-column
              prop="prop"
              label="基本信息"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.age }} / {{ scope.row.educationCn }} /
                {{ scope.row.experienceCn }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="完整度" width="70">
              <template slot-scope="scope">
                {{ scope.row.completePercent }}%
              </template>
            </el-table-column>
            <el-table-column
              prop="count"
              label="投递次数"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="更新时间"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.refreshtime | dateFormat }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="padding: 10px">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b>热门简历排行榜TOP100</b>
            <el-radio-group
              v-model="popularTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioRMChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="popularList" style="width: 100%" border>
            <el-table-column
              prop="fullname"
              label="姓名"
              width="70"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="50" align="center">
            </el-table-column>
            <el-table-column
              prop="prop"
              label="基本信息"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.age }} / {{ scope.row.educationCn }} /
                {{ scope.row.experienceCn }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="完整度" width="70">
              <template slot-scope="scope">
                {{ scope.row.completePercent }}%
              </template>
            </el-table-column>
            <el-table-column
              prop="count"
              label="投递次数"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="更新时间"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.refreshtime | dateFormat }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  hotRefResumeApi,
  hotResumeDeliveryApi,
  hotResumeLoginApi,
  hotResumeDownloadApi,
  hotResumeRankApi,
} from "@/api/portrait";
export default {
  data() {
    return {
      refreshTime: "",
      refreshList: [],
      deliverTime: "",
      deliverList: [],
      jobSeekTime: "",
      jobSeekList: [],
      downLoadTime: "",
      downLoadList: [],
      popularTime: "",
      popularList: [],
    };
  },
  created() {
    this.hotRefResume();
    this.hotResumeDelivery();
    this.hotResumeLogin();
    this.hotResumeDownload();
    this.hotResumeRank();
  },
  methods: {
    // 简历刷新榜
    async hotRefResume() {
      const res = await hotRefResumeApi(this.refreshTime);
      this.refreshList = res.data;
    },
    // 简历刷新排行榜按钮切换事件
    async handleRadioRefChange(e) {
      console.log(e);
      const res = await hotRefResumeApi(e);
      this.refreshList = res.data;
    },
    //  简历投递榜
    async hotResumeDelivery() {
      const res = await hotResumeDeliveryApi(this.deliverTime);
      this.deliverList = res.data;
    },
    // 简历投递榜按钮切换事件
    async handleRadioTDChange(e) {
      console.log(e);
      const res = await hotResumeDeliveryApi(e);
      this.deliverList = res.data;
    },
    // 求职者登录榜
    async hotResumeLogin() {
      const res = await hotResumeLoginApi(this.jobSeekTime);
      this.jobSeekList = res.data;
    },
    // 简历求职者登录按钮切换事件
    async handleRadioQZChange(e) {
      const res = await hotResumeLoginApi(e);
      this.jobSeekList = res.data;
    },
    // 求职者被下载榜
    async hotResumeDownload() {
      const res = await hotResumeDownloadApi(this.downLoadTime);
      this.downLoadList = res.data;
    },
    // 简历求职被下载按钮切换事件
    async handleRadioXZChange(e) {
      const res = await hotResumeDownloadApi(e);
      this.downLoadList = res.data;
    },
    // 热门简历排行榜
    async hotResumeRank() {
      const res = await hotResumeRankApi(this.popularTime);
      this.popularList = res.data;
    },
    // 热门简历排行榜按钮切换事件
    async handleRadioRMChange(e) {
      const res = await hotResumeRankApi(e);
      this.popularList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.clearfix {
  line-height: 35px;
}
.el-table {
  max-height: 300px;
  overflow-y: auto;
}
</style>
